<template>
  <div>
    <div class="lwy-back">
      <router-link to="/happyhome/leisure/keepinglive"><i class="el-icon-arrow-left"></i>返回首页</router-link>
    </div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-input v-model="formInline.user" placeholder="请输入"></el-input>

      <el-form-item>
        <el-button   class="el-button--primary" type="primary" @click="onSubmit">查询</el-button>
        <el-button class="el-button--primary" type="primary" @click="onReset">重置</el-button>
        <el-button class="el-button--primary" type="primary" @click="addDialog = true">添加</el-button>
      </el-form-item>
    </el-form>

    
    <el-table :data="tableData" border style="width:100%" :default-sort="{ prop: 'tim', order: 'descending' }">

      <el-table-column align="center" prop="name" label="姓名">
      </el-table-column>
      <el-table-column align="center" prop="age" label="年龄" sortable>
      </el-table-column>
      <el-table-column align="center" prop="height" label="身高/cm" sortable>
      </el-table-column>
      <el-table-column align="center" prop="weight" label="体重/kg" sortable>
      </el-table-column>
      <el-table-column align="center" prop="state" label="状态">

        <template slot-scope="scope">
          <el-tag :type="scope.row.state === '健康' ? 'primary' : 'success'" disable-transitions>{{ scope.row.state
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="tim" label="日期" sortable>
      </el-table-column>
      <el-table-column align="center" prop="benzhu" label="备注">
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" class="button" size="small">修改</el-button>

          <template>
            <el-popconfirm title="这是一段内容确定删除吗？" @confirm="del(scope.row)">
              <el-button class="button" type="text" size="small" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
        :page-sizes="[5, 8, 10]" layout="total, sizes, prev, pager, next, jumper" :total="totalData.length">
      </el-pagination>
    </div>

    <el-dialog title="添加" :visible.sync="addDialog" style="width:100%">
      <el-form :model="addData">
        <el-form-item label="日期" :label-width="formLabelWidth">
          <el-date-picker v-model="addData.tim" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="addData.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input v-model="addData.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="身高" :label-width="formLabelWidth">
          <el-input v-model="addData.height" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="体重" :label-width="formLabelWidth">
          <el-input v-model="addData.weight" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-input v-model="addData.state" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="addData.benzhu" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="onAdd">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog title="修改" :visible.sync="editDialog" style="width:100%">
      <el-form :model="editData">
        <el-form-item label="日期" :label-width="formLabelWidth">
          <el-date-picker v-model="editData.tim" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="editData.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input v-model="editData.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="身高" :label-width="formLabelWidth">
          <el-input v-model="editData.height" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-input v-model="editData.state" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="体重" :label-width="formLabelWidth">
          <el-input v-model="editData.weight" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="editData.benzhu" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button type="primary" @click="onEdit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
export default {

  data() {
    return {
      disabledDate(time) {
        return time.getTime() > Date.now();
      },
      page: 1,
      count: 5,
      formLabelWidth: "100px",
      addDialog: false,
      editDialog: false,
      currentPage4: 1,
      editData: {
        tim: '',
      },
      addData: {},
      totalData: [],
      formInline: {
        search: "",
      },
      tableData: [],

    }
  },
  methods: {
    formatter(row, column) {
      return row.address;
    },
    handleSizeChange(val) {
      this.count = val
      this.tableData = this.totalData.slice(0, this.count)
    },
    handleCurrentChange(val) {
      this.tableData = this.totalData.slice((val - 1) * this.count, val * this.count);
    },
    // 渲染
    render() {
      axios({
        url: '/dbdata/keedaka',
      }).then(({ data }) => {
        // console.log(data);
        // this.tableData = data
        this.totalData = data
        this.tableData = this.totalData.slice((this.currentPage4 - 1) * this.count, this.currentPage4 * this.count)

      });
    },

    // 修改
    handleClick(v) {
      this.editDialog = true;
      this.editData = {
        id: v.id,
        tim: v.tim,
        name: v.name,
        height: v.height,
        weight: v.weight,
        age: v.age,
        benzhu: v.benzhu,
        state: v.state
      };
    },
    onEdit() {
      let id = this.editData.id
      axios({
        url: `/dbdata/keedaka/${id}`,
        method: "patch",
        data: this.editData,
      }).then((res) => {
        this.editDialog = false;
        //   this.editData = res.editData
        this.$message.success("修改成功");
        this.render();
      })
    },

    // 添加
    onAdd() {
      axios({
        url: '/dbdata/keedaka',
        method: 'post',
        data: this.addData,
      }).then((data) => {
        // console.log(res);
        this.addDialog = false;
        this.tableData = data
        this.$message.success('添加成功')
      })
      this.render()
    },
    // 删除
    del(row) {
      let id = row.id
      axios({
        url: `/dbdata/keedaka/${id}`,
        method: 'delete',
      }).then((data) => {
        this.totalData = data;
        if (Math.ceil((this.tableData.length - 1) / this.count) < this.currentPage4) {
          this.currentPage4--
        }
        this.$message.success("删除成功");
        this.render();

      })
      this.render();

    },
    // 搜索
    onSubmit() {
      axios({
        url: '/dbdata/keedaka?q=' + this.formInline.user,
      }).then(({ data }) => {
        this.totalData = data;
        this.tableData = this.totalData.slice((this.currentPage4 - 1) * this.count, this.currentPage4 * this.count);
        this.formInline.user = '';

      })
      console.log('submit!');
    },


    //
    onReset() {
      this.page = 1;
      this.formInline.user = ''
      this.render();

    },
    render() {
      axios({
        url: '/dbdata/keedaka/'
      }).then(({ data }) => {
        this.totalData = data;
        this.tableData = this.totalData.slice((this.currentPage4 - 1) * this.count, this.currentPage4 * this.count);

      })
    }
  },

  mounted() {
    this.render();
  },



}
</script>
<style lang="less" scoped>
.block {
  margin-left: 600px !important;
}

.el-input {
  width: 200px !important;
  margin-right: 10px;
}

.el-form-item {
  margin-right: 550px !important;
}

.lwy-back {
  text-align: left;
  margin-left: 5px;
  margin-top: 20px;

  a:-webkit-any-link {
    color: rgba(00, 00, 00, 0.67);
    text-decoration: none;

    .el-icon-arrow-left {
      margin-right: 5px;
    }
  }

}



.button {
  width: 50px;
}

.el-button--primary {
  background-color: rgb(255, 233, 192);
  color: rgba(00, 00, 00, 0.8);
  border-color: rgb(255, 233, 192);
}

.el-button--primary:hover {
  background-color: rgba(255, 233, 192, 0.8);
  color: rgba(00, 00, 00, 0.5);
  // border-color: rgba(255, 233, 192, 0.8);
}
</style>